﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>KF_ui测试页面</title>
<script type="text/javascript" src="ui/kf.core-min.js"></script>
<script type="text/javascript" src="ui/kf.ui-min.js"></script>
</head>
<body>

<div id="my_div" align="center" style="background-color:yellow;width:90px;height:90px;left:400px;top:10px;position:absolute;z-index:400">
<span id="info" style="text-align:center; vertical-align:middle;"></span>
</div>
<script type="text/javascript">
	function test_ui(){
		var t = document.getElementById("my_div");
		var ui = KF_ui(t);
		ui.Drag({clone:1,opacity:0.2});
		
		ui.Resizeble({lock:{b:1,t:1}});
		//ui.Resizeble({anima:{ls: 30,rs: 30,ts: 30,bs: 30},lock:{b:1,t:1}});
		
		var mrp = new mr_play()
		mrp.add({type:"move",t:t,x:800,y:300,xs:5,ys:5,func:function(){t.style.backgroundColor ="#BDB76B";}});
		mrp.add({type:"resize",t:t,w:400,h:500,ls:5,rs:15,la:-15,ra:-15,ts:5,bs:15,ta:-15,ba:-15,func:function(){t.style.backgroundColor ="#FFEBCD";}});
		mrp.add({type:"move",t:t,x:300,y:100,xs:5,ys:5,func:function(){t.style.backgroundColor ="#8FBC8B";t.style.borderColor ="yellow";}});
		mrp.add({type:"resize",t:t,w:90,h:90,ls:5,rs:15,la:-15,ra:-15,ts:5,bs:15,ta:-15,ba:-15,func:function(){t.style.backgroundColor ="yellow";}});
		mrp.add({type:"move",t:t,x:900,y:200,xs:5,ys:5,func:function(){t.style.borderColor ="green";}});
		mrp.add({type:"resize",t:t,w:500,h:300,ls:50,rs:55,la:-15,ra:-15,ts:5,bs:15,ta:-5,ba:-5,func:function(){t.style.backgroundColor ="#7FFF00";}});
		mrp.add({type:"move",t:t,x:450,y:220,xs:5,ys:5});
		
		//mrp.execute();
	}
	test_ui()

</script>

<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

</html>
